<template>
	<view class="">
		<u-form :model="form" :rules="rules" ref="uForm" :error-type="errorType" label-width="160" style="background-color: #FFFFFF;padding: 0 20upx;">
			<u-form-item label="姓名" prop="realname"><u-input v-model="form.realname" /></u-form-item>
			<u-form-item label="手机号码" prop="phone"><u-input v-model="form.phone" /></u-form-item>
			<u-form-item label="身份证号码" prop="id_card_no"><u-input v-model="form.id_card_no" type="idcard" /></u-form-item>
			<u-form-item label="开户行" prop="bank_name"><u-input v-model="form.bank_name" type="select" :select-open="bankListShow" @click="bankListShow = true" /></u-form-item>
			<u-form-item label="银行卡号" prop="bank_card_no"><u-input v-model="form.bank_card_no" type="number" /></u-form-item>
		</u-form>
		<view class="u-padding-20">
			<u-button type="success" @click="submit">确定绑定银行卡</u-button>
		</view>
		
		<u-select v-model="bankListShow" mode="single-column" :list="bankList" @confirm="confirm"></u-select>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import request from "@/utils/request.js";
	export default {
		data() {
			return {
				form: {
					realname: '',
					phone: '',
					id_card_no: '',
					bank_code: '',
					bank_name: '',
					bank_card_no: '',
				},
				errorType: ['toast'],
				rules: {
					realname: [
						{
							required: true,
							message: '请输入姓名',
							trigger: 'blur' ,
						},
					],
					phone: [
						{
							required: true,
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change','blur'],
						}
					],
					bank_name: [
						{
							required: true,
							message: '请选择开户行',
							trigger: 'change',
						}
					],
				},
				bankListShow: false,
				bankList: [],
			};
		},
		onLoad() {
			this.getBankList();
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			this.getUserBank();
		},
		methods: {
			getUserBank() {
				let that = this
				request.get('user/user_bank/detail').then(res => {
					let data = res.data;
					that.form.realname = data.realname;
					that.form.phone = data.phone;
					that.form.id_card_no = data.id_card_no;
					that.form.bank_code = data.bank_code;
					that.form.bank_name = data.bank_name;
					that.form.bank_card_no = data.bank_card_no;
				});
			},
			getBankList() {
				let that = this;
				request.get('user/user_bank/get_bank_list').then(res => {
					let data = res.data;
					data.forEach(item => {
						that.bankList.push({ value: item.code, label: item.name});
					})
				});
			},
			confirm(e) {
				e.map((item, index) => {
					this.form.bank_code = item.value;
					this.form.bank_name = item.label;
				})
			},
			submit() {
				let that = this;
				uni.showLoading({ title: '加载中', mask: true});
				this.$refs.uForm.validate(valid => {
					if (valid) {
						request.post('user/user_bank/create', this.form).then(res => {
							setTimeout(function() {
								uni.hideLoading();
								that.$refs.uToast.show({
									title: res.msg,
									type: 'success',
									back: true
								})
							}, 200);
						}).catch(err => {
							setTimeout(function() {
								uni.hideLoading();
								that.$refs.uToast.show({
									title: err,
									type: 'error',
								})
							}, 200);
						})
					} else {
						console.log('验证失败');
					}
				});
			},
		}
	};
</script>

<style>
</style>